<template>
  <div>
    <el-tabs>
      <el-tab-pane label="总额top20">
        <el-divider content-position="left"><h2>交易数额top20的日期</h2></el-divider>
        <div class="knowledge-div">
          <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="top20amount"
              stripe
              border>
            <el-table-column type="index" />
            <el-table-column
                prop="sum"
                label="交易总额">
            </el-table-column>
            <el-table-column
                prop="date"
                label="交易时间">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="数量top20">
        <el-divider content-position="left"><h2>交易数量top20的日期</h2></el-divider>
        <div class="knowledge-div">
          <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="top20num"
              stripe
              border>
            <el-table-column type="index"/>
            <el-table-column
                prop="sum"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="date"
                label="日期">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="用户top20">
        <el-divider content-position="left"><h2>交易额度top20的用户</h2></el-divider>
        <div class="knowledge-div">
          <el-table
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="top20cust"
              stripe
              border>
            <el-table-column type="index"/>
            <el-table-column
                prop="name"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="amount"
                label="额度">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script setup>

import {getData} from "../network/clickhouse/data";
import { ref } from 'vue';

let params = {
  query: 'select sum(tran_amt_fen), tran_date from dm.dm_v_tr_etc_mx group by tran_date order by sum(tran_amt_fen) desc limit 20'
}

let top20amount = ref([]);
let top20num = ref([]);
let top20cust = ref([]);
let tmpResult;

getData(params)
    .then(data => {
      tmpResult = data;
      tmpResult = tmpResult.split('\n').map(tmp => tmp.split('\t'));
      return tmpResult;
    }).then(tmpResult => {
      // console.log(tmpResult);
      for (let i=0; i<20; i++) {
        let date = '';
        date += tmpResult[i][1].substring(0,4) + '年' + tmpResult[i][1].substring(4,6) + '月' + tmpResult[i][1].substring(6,8) + '月';
        top20amount.value.push({
          sum: tmpResult[i][0],
          date: date
        })
      }
})
    .catch(err => {
      console.log(err)
    })

params.query = "select count(*), tran_date from dm.dm_v_tr_etc_mx group by tran_date order by count(*) desc limit 20"

getData(params)
    .then(data => {
      tmpResult = data;
      tmpResult = tmpResult.split('\n').map(tmp => tmp.split('\t'));
      return tmpResult;
    }).then(tmpResult => {
        // console.log(tmpResult);
        for (let i=0; i<20; i++) {
          let date = '';
          date += tmpResult[i][1].substring(0,4) + '年' + tmpResult[i][1].substring(4,6) + '月' + tmpResult[i][1].substring(6,8) + '月';
          top20num.value.push({
            sum: tmpResult[i][0],
            date: date
          })
        }
})
    .catch(err => {
      console.log(err)
    })

params.query = "select cust_name, sum(tran_amt_fen) from dm.dm_v_tr_etc_mx group by cust_name order by sum(tran_amt_fen) desc limit 20"

getData(params)
    .then(data => {
      tmpResult = data;
      tmpResult = tmpResult.split('\n').map(tmp => tmp.split('\t'));
      return tmpResult;
    }).then(tmpResult => {
  // console.log(tmpResult);
  for (let i=0; i<20; i++) {
    top20cust.value.push({
      name: tmpResult[i][0],
      amount: tmpResult[i][1]
    })
  }
})
    .catch(err => {
      console.log(err)
    })


</script>

<style scoped>
.knowledge-div {
  margin: 30px 40px
}
</style>
